import * as React from 'react';
import { LoginForm, ProFormText} from '@ant-design/pro-form';
import {
    UserOutlined,
    LockOutlined
} from '@ant-design/icons';
import { connect, Dispatch } from 'umi'
export interface IAppProps {
    dispatch: Dispatch
}

function App (props: IAppProps) {
    function onFinish (values: { adminname: string; password: string }): Promise<void> {
        props.dispatch({
          type: 'admin/loginAction',
          payload: values
        })
    }
    return (
        <div style={{ height: '100%',position: 'relative', top: '200px' }}>
            <LoginForm onFinish = { onFinish }>
                <ProFormText
                    name="adminname"
                    fieldProps={{
                        size: 'large',
                        prefix: <UserOutlined className={'prefixIcon'} />,
                    }}
                    placeholder={'管理员账户'}
                    rules={[
                        {
                            required: true,
                            message: '请输入管理员账户!',
                        },
                    ]}
                />
                <ProFormText.Password
                    name="password"
                    fieldProps={{
                        size: 'large',
                        prefix: <LockOutlined className={'prefixIcon'} />,
                    }}
                    placeholder={'密码'}
                    rules={[
                        {
                            required: true,
                            message: '请输入正确密码！',
                        },
                    ]}
                />
                <div
                    style={{
                        marginBottom: 24,
                    }}
                >
                </div>
            </LoginForm>
        </div>
    )
}

export default connect()(App)